<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
			#box{
				width: 800px;
				height: 500px;
				border: 4px solid blue;
				margin: 0 auto;
				/*如果元素的位置都已经布置好了,但是为了给子元素有个参考还必须加一个定位属性,那么一般是加相对定位*/
				position: relative;
				z-index: 99;
			}
			#box .hd1{
				width: 300px;
				height: 150px;
				background: orange;
				position: absolute;
				left: 100px;
				top: 50px;
				z-index: 2;
			}
			#box .hd2{
				width: 330px;
				height: 200px;
				background: limegreen;
				position: absolute;
				left: 300px;
				top: 150px;
				z-index: 55;
			}
		</style>
	</head>
	<body>
		<!--每个有定位属性的元素，都独占一层-->
		<!--有定位属性的元素谁在上面比的是层级(z-index)值，谁的值大，谁就在上面-->
		<!--有定位属性的元素默认层级是0，如果层级一样，那么后来者居上-->
		<!--只有有定位属性的元素才有层级属性-->
		<!--只有亲兄弟元素才能比层级-->
		
		<div id="box">
			
			<div class="hd1"></div>
			<div class="hd2"></div>
			
		</div>
		
		
		
		
	</body>
</html>
